<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/reset.css">
    <!-- <link rel="stylesheet" href="font/css/all.css"> -->
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="iconfont2/iconfont.css">

    <link rel="stylesheet" href="iconfont3/iconfont.css">
    <link rel="stylesheet" href="iconfont/icofont/iconfont.css">
<link rel="stylesheet" href="./css/erWeiMa.css">
 <link rel="stylesheet" href="./css/bottom.css">
   
<!-- <script src="http://223.83.212.24:8002/api/file/handle/index.js"></script> -->

   <script src="./js/jquery.min.js">
 
 
   </script>  


<!-- //实现点击QQ图标时，底部弹出 -->

   <script>         $(document).ready(function(){
        $("#qq,#weiXin,#csdn,#github,#ali").click(function(e){
            // console.log(e)
            $(".bottom-login").css("height","350px" )
        });
    });</script>

 <script>         $(document).ready(function(){
        $(".waibu").click(function(e){
            // console.log(e)
            $(".bottom-login").css("height","0px")
        });
    });</script>



 <!-- <script>         $(document).ready(function(){
        $(".miMa").click(function(e){
            // console.log(e)
            $(".bottom-login").css("display","")
        });
    });</script> -->





<!-- bottom.css -->




</head>

<body>
<!-- <div class="waibu" style="width: 100%;height: 1000px;background-color:; position:absolute;z-index: 99999; ">



</div> -->
<div class="waibu" style="height: 100%;width: 100%;background-color:  ;position: absolute;top: 0%;">

</div>
    <div class="container"   >
        <!-- Í¼±ê×ÖÌå -->
        <!-- <i class="fas fa-hospital-user" style="font-size: 36px; font-style:oblique; margin-left: 5px;"> </i> -->

        <!-- <i class="iconfont">&#xe98c;</i> -->
        <i id="erweima" class="iconfont"
    style="font-size: 120px; float: right;position: relative; box-shadow: -13px 13px 20px darkgray;text-shadow:2px 3px 1px pink; position: relative; top: -75px;right: 1px;border-radius:3px 8px 3px; background-color: rgba(256, 235, 215, .2);">&#xe653;</i>



<div class="erweima">


</div>


<!-- 
<i  id="erWeiMa" class="iconfont"
            style="font-size: 120px; float: right;position: relative;left: 24%;z-index: -4; transform: rotate(180deg); text-shadow:2px 3px 1px pink; position: relative; top: -75px;right: 1px;border-radius:3px 8px 3px; background-color: rgba(256, 235, 215, .2);">&#xe653;</i> -->

        <div class="header">
            <i class="fas fa-fingerprint"
                style="font-size: 54px;text-shadow:2px 3px 1px pink;  font-style:oblique; margin-left: 5px;"> </i>

            LOGIN

        </div>
        <div class="center">




<!-- 这里是QQ的图标，要实现点击QQ按钮时，底部的白色方块高度增加  -->
             <a href="javascript:;">

                <i id="qq"  class="iconfont" style="font-size: 65px;   text-shadow: 3px 2px 1px pink ;">&#xe666;</i>
            </a>

<!-- <button>

      <i id="qq"  class="iconfont" style="font-size: 65px;   text-shadow: 3px 2px 1px pink ;">&#xe666;</i>
</button> -->







           <!-- <input class="iconfont" type="button" onClick="bottom-login.style.height='400px';"> -->
            
            &nbsp;
            <a href="javascript:;">
                <i  id="weiXin" class="iconfont" style="font-size: 65px;text-shadow: 3px 2px 1px pink ;">&#xe739;</i>
            </a> &nbsp;
            <a href="javascript:;">

                <i  id="csdn"  class="iconfont" style="font-size: 65px;text-shadow:1px 1px 1px pink ;">&#xe638;</i>
            </a> &nbsp;
            <a href="javascript:;">

                <i id="github" class="iconfont" style="font-size: 65px;text-shadow: 3px 2px 1px pink ;">&#xe6f6;</i>
            </a> &nbsp;
            <a href="javascript:;">

                <i id="ali"  class="iconfont" style="font-size: 65px;text-shadow: 3px 2px 1px pink ;">&#xe63b;</i>
            </a>
        </div>


        <form action="javascript:;">

            <div class="form-wrapper" ">
               
                <div class=" input-wrapper">


                <div class="oneborder-wrapper">

                    <!-- <i class="iconfont" style="font-size: 23px;position: relative;  left: 20px; top:13px">&#xe631;</i>   -->
                    <input id="userName" type="text" name="username" placeholder="username "  onblur="pwdCheck()" >

                </div>


                <div class="twoborder-wrapper">
                    <input id="pwd"  type="password" name="password" placeholder="password" onblur="pwdCheck()">
                    
                </div>


            </div>




    </div>



    </form>

    <a href="#">
      
        <div class="action" style="color: black;">
            <i id="login-button" class="iconfont" style="font-size: 65px;">&#xe677;</i>
        </div>
    </a>
    <!-- /*也可以使用<button></button>,action 跳转*/ -->

    <!-- <div class="lineer"></div>
    </div> -->

<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>

   <script src="/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/js/jquery-1.8.4.min.js" type="text/javascript"></script>

<!-- <script src="js/queRen.js" type="text/javascript"></script> -->

<div   class="bottom-login">


<div class="miMa" >
 <input class="zhanghao" type="text" name="" placeholder="用户名">
        <input class="mima" type="password" name="" placeholder="密码">
 

<input class="yanzhengma" type="text" name="" placeholder="    图中共有多少个图形">
      
      <div class="img">

      </div>
    
   
        <!-- <input type="submit" name="" value="提交"> -->
</div>

 <div class="wenzineirong">
        看不清，换一张
    </div>
</div>


</html>